<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!--
  <script type="text/javascript">
    window.onload=function(){
      var oTxta=document.getElementById('inputGroupSelect01');
      var oDiv_b=document.getElementById('div_b');
      oTxta.oninput=function showTxtb(){
        if (oTxta.value=='员工') {
          oDiv_b.style.display='block';
        }
      }
    }
  </script>
  -->
</head>
<body>
  
  <div class="myBody">
    <br /><br />
    <div class="myTitle">
      <br />
      <h1>用户注册</h1>
    </div>
      
    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">真实姓名</span>
        </div>
        <input id="userrealname" type="text" #name class="form-control" #username aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>
    </div>

    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">员工 ID</span>
        </div>
        <input id="username" type="text" class="form-control" #username aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>
    </div>

    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">登录密码</span>
        </div>
        <input id="password" type="password" class="form-control" #password aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>
    </div>

    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="input-group mb-3" >
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">职位</label>
        </div>
        <select class="custom-select"  #position [(ngModel)]='myPosition' (ngModelChange)='showTxtb($event)'  >
          <option selected>请选择...</option>
          <option value="员工">员工</option>
          <option value="部门经理">部门经理</option>
          <option value="副总经理">副总经理</option>
          <option value="总经理">总经理</option>

        </select>
      </div>
    </div>
    <p>{{info}}</p>
    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="input-group mb-3" id='department' style="visibility: hidden;">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">部门</label>
        </div>
        <select class="custom-select" #department id="inputGroupSelect02">
          <option selected>请选择...</option>
          <option value="行政部">行政部</option>
          <option value="财政部">财政部</option>
          <option value="项目组">项目组</option>
        </select>
      </div>
    </div>

    <br />
    <div class="mx-auto" style="width: 50ch;">
      <div class="myText">
        <button type="button" (click)="register(name.value, username.value, password.value, position.value, department.value)" class="myButton">确认注册</button>
      </div>
    </div>      
         
  </div>
</body>